<template>
  <div class="address-search" v-if="isShow">
    <div class="address-box">
      <div class="search-input">
        <i class="fa fa-search"></i>
        <input type="text" placeholder="请输入小区/写字楼/学校等" v-model="search_address">
        <div class="cancle" @click="$emit('hiddenModel')">
          <button>取消</button>
        </div>
      </div>
      <div class="search-list">
        <ul>
          <li v-for="(item,index) in areaList" :key="index" @click="search_click(item)">
            <p class="search-row-title">{{item.name}}</p>
            <p class="search-row-location">{{item.district}}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AddressSearch',
  props: {
    isShow: Boolean,
    searchInfo: Object
  },
  data() {
    return {
      search_address: '',
      isshowModel: false,
      areaList: [],
      searchInfoList: this.searchInfo
    }
  },
  computed: {
    city() {
      return this.$store.getters.location.addressComponent.city || this.$store.getters.location.addressComponent.province
    }
  },
  watch: {
    search_address(val) {
      this.searchNearBy(val)
    }
  },
  methods: {
    searchNearBy(val) {
      AMap.plugin('AMap.Autocomplete', () => {
        // 实例化Autocomplete
        const autoOptions = {
          // city 限定城市，默认全国
          city: this.city
        }
        const autoComplete = new AMap.Autocomplete(autoOptions)
        autoComplete.search(val, (status, result) => {
          // 搜索成功时，result即是对应的匹配数据
          console.log(result)
          this.areaList = result.tips
        })
      })
    },
    search_click(item) {
      this.searchInfoList.address = item.name
      this.$emit('update', this.searchInfoList.address)
      this.$emit('hiddenModel')
    }
  }
}
</script>

<style lang="less" scoped>
.address-search {
  position: fixed;
  top: 3.0625rem;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: #fff;
  .address-box {
    width: 100%;
    height: 3.0625rem;
    padding: 0.625rem 0;
    box-sizing: border-box;
    .search-input {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      input {
        flex: 1;
        border: none;
        outline: none;
        padding: 0.5rem 1.5625rem;
        background-color: #f1f1f1;
      }
      i {
        position: relative;
        top: 0;
        left: 1.5625rem;
        color: #666;
      }
      .cancle {
        height: 2.125rem;
        text-align: center;
        line-height: 2.125rem;
        margin-left: 0.5rem;
        background-color: #ddd;
        border-radius: 0.3125rem;
        button {
          border: none;
          outline: none;
        }
      }
    }
    .search-list {
      ul {
        li {
          border: 1px solid #ccc;
          padding: 10px 15px;
          line-height: 1.4;
          p {
            margin: 0;
          }
          .search-row-title {
            font-size: 18px;
            font-weight: 700;
            color: #333;
          }
          .search-row-location {
            font-size: 14px;
            color: #666;
          }
        }
      }
    }
  }
}
</style>
